<script setup>
import { getUserInfo, newTokenService } from '@/api/userInfo'
import { computed, ref, reactive } from 'vue'
import { updateUserService } from '@/api/user';
import { ElMessage } from 'element-plus'


const userInfo = reactive({})
const form = reactive({
    name: '',
    roomNumber: '',
    id: '',
    phoneNumber: '',
    email: ''
})

async function getInfo() {
    userInfo.value = {}
    // console.log('清空')
    // console.log(userInfo.value)
    let result = await getUserInfo()
    let res = await newTokenService("业主", result.data.userId)
    localStorage.setItem('Authorization', res.data)
    result = await getUserInfo()
    userInfo.value = result.data
    // console.log(userInfo.value)
}

getInfo()

const flag = ref(false)

const edit = () => {
    form.name = userInfo.value.name
    form.roomNumber = userInfo.value.userId
    form.id = userInfo.value.id
    form.phoneNumber = userInfo.value.phoneNumber
    form.email = userInfo.value.email
    flag.value = true
}

const updateUser = async () => {
    await updateUserService(form)
    ElMessage.success('修改成功')
    let result = await newTokenService("业主", form.roomNumber)
    localStorage.setItem('Authorization', result.data)
    // getInfo()
    location.reload() 
    // console.log(userInfo)
    flag.value = false
}

const checkMobile = (rule, value, cb) => {
    const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
    if (regMobile.test(value)) {
        //合法的手机号
        return cb();
    }
    //手机号不合法
    cb(new Error('请输入合法的手机号！'));
}
const rules = {
    name: [{ required: true, message: '姓名不可为空！', trigger: 'blur' }],
    phoneNumber: [
        { required: true, message: '手机号不可为空！', trigger: 'blur' },
        { validator: checkMobile, trigger: ['blur', 'change'] }
    ]
}

</script>


<template>
    <div style="padding:25px">
        <el-descriptions title="个人信息" :column="3" size="large" border>
            <template #extra>
                <el-button type="primary" @click="edit" v-if="!flag"><el-icon style="margin-right: 3px;">
                        <Edit />
                    </el-icon> 编辑</el-button>
                <el-button type="primary" @click="flag = false" v-if="flag"
                    style="background: lightgray;border-color: lightgray;"><el-icon style="margin-right: 3px;">
                        <CloseBold />
                    </el-icon> 取消</el-button>
                <el-popconfirm title="确定保存修改?" @confirm="updateUser" @cancel="flag = false">
                    <template #reference>
                        <el-button type="primary" v-if="flag"><el-icon style="margin-right: 3px;">
                                <Select />
                            </el-icon> 提交</el-button>
                    </template>
                </el-popconfirm>
            </template>
            <div v-if="!flag">
                <el-descriptions-item>
                    <template #label>
                        <div>
                            <el-icon>
                                <user />
                            </el-icon>
                            姓名
                        </div>
                    </template>
                    <span>{{ userInfo.value.name }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div>
                            <el-icon>
                                <iphone />
                            </el-icon>
                            手机号
                        </div>
                    </template>
                    <span>{{ userInfo.value.phoneNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div>
                            <el-icon>
                                <House />
                            </el-icon>
                            房间号
                        </div>
                    </template>
                    <span>{{ userInfo.value.userId }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div>
                            <el-icon>
                                <Message />
                            </el-icon>
                            邮箱
                        </div>
                    </template>
                    <span>{{ userInfo.value.email }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div>
                            <el-icon>
                                <CreditCard />
                            </el-icon>
                            身份证号
                        </div>
                    </template>
                    <span>{{ userInfo.value.id }}</span>
                </el-descriptions-item>
            </div>

        </el-descriptions>
        <div v-if="flag" style="padding-top: 10px;margin-top: 10px;">
            <el-form :model="form" label-width="75px" :rules="rules" size="large">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="form.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="门牌号" prop="roomNumber">
                    <el-input v-model="form.roomNumber" disabled></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" disabled></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="id">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div style="text-align: center;margin-top: 40px;color: gray;" v-if="flag">
            <p>修改其他信息需要更高权限，请您携带身份证和房产证前往物业办公室进行更改@平安物业</p>
        </div>
    </div>

</template>